/*
 * @Description: 订单详情-定制班线
 * @Author: ziwei.ma
 * @Date: 2019-07-23 16:30:25
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-10 14:12:51
 */

<template>
  <div id="app">
    <div
      class="customRouteOrderDetail_wrap"
      v-show="show === DATA_LIST"
    >
      <order-status :orderDetailInfo="orderDetailInfo"></order-status>
      <order-information :orderDetailInfo="orderDetailInfo"></order-information>
      <order-number-detail :orderDetailInfo="orderDetailInfo"></order-number-detail>
      <buttons :orderDetailInfo="orderDetailInfo"></buttons>
      <payment ref="Payment"></payment>
    </div>
    <!-- 网络超时展示无网络 -->
    <net-error
      @click.native="onNetError"
      v-show="show === DATA_NETERROR"
    />
  </div>
</template>

<script>
import NetError from '@/components/NetError'
import OrderStatusVue from './components/OrderStatus.vue'
import OrderInformationVue from './components/OrderInformation'
import OrderNumberDetailVue from './components/OrderNumberDetail.vue'
import ButtonsVue from './components/Buttons.vue'
import PaymentVue from '../../components/Payment'
import { getOrderDetail } from './api/api'
export default {
  components: {
    'order-status': OrderStatusVue,
    'order-information': OrderInformationVue,
    'order-number-detail': OrderNumberDetailVue,
    'buttons': ButtonsVue,
    'payment': PaymentVue,
    'net-error': NetError
  },
  data() {
    return {
      DATA_LIST: 1, // 正常数据显示
      DATA_NETERROR: 2, // 网络超时展示
      show: 1,
      orderDetailInfo: {}
    }
  },
  watch: {
    orderDetailInfo() { // 监控状态已支付显示标题栏右侧购票记录入口
      if (this.orderDetailInfo.isTitleRightBtn) {
        this._setTitle()
      }
    }
  },
  mounted() {
    this._addEvent()
    this._getDataList()
  },
  methods: {
    // 获取数据
    _getDataList() {
      getOrderDetail().then(res => {
        this.show = this.DATA_LIST
        this.orderDetailInfo = res
      }).catch(err => {
        console.dir(err)
        if (err.error.code === 'ECONNABORTED') {
          this.show = this.DATA_NETERROR
        }
      })
    },
    // 无网络点击
    onNetError() {
      this._getDataList()
    },
    // 设置标题栏右侧按钮
    _setTitle() {
      var Menuitems = []
      var Menuitem = {}
      var i = 1
      Menuitem.menutext = '购票记录'
      Menuitem.menuid = i
      Menuitem.menuicon = ''
      Menuitems.push(Menuitem)
      this.$UI.then(UI => {
        UI.setRightItem(Menuitems, () => { console.log('购票记录按钮生成成功') }, () => { console.log('购票记录按钮生成失败') })
      })
      window.onMenuSelect = (index) => {
        location.assign('xbapp://m.xiaobu.hk/customLine/ticketRecord?ORDER_NO=' + this.orderDetailInfo.outOrderNo)
      }
    },
    _addEvent() {
      document.addEventListener('resume', () => {
        this._getDataList()
      })
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px;
  box-sizing: border-box;
}
.font_small {
  font-size: 12px; /*no*/
}
</style>
